<%--
刘浩
  Created by IntelliJ IDEA.
  User: 123
  Date: 2018/9/3
  Time: 19:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的信息</title>
    <link rel="stylesheet" type="text/css" href="css/new_file.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
        input {
            background: #f5e79e; /*设置输入框背景色*/
        }
        textarea {
            background: #f5e79e; /*设置输入框背景色*/
        }

        .img{
            width: 100px;height:100px;border-radius:100px
        }
        .word{
            font-family: youyuan;
            color: #ccc;
            text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;    }

    </style>
</head>
<body>
<div class="header">
    <img class="image1" src="img/weblogo.png">
</div>
<br/><br/><br/><br/>
<form name="form1" method="post">
    <div style="text-align: center">
        <div id="app" class="container">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                    <div class="item_bock head_p">
                        <div class="setting_right" @click.stop="uploadHeadImg">
                            <div class="caption">
                                <div class="head_img">
                                    <img :src="userInfo.avatar"  class="img" title="点击这里可以更换头像哦！"/>
                                </div>
                            </div>
                        </div>
                        <input type="file" accept="image/*" @change="handleFile" style="visibility: hidden;"
                               class="hiddenInput"/>
                    </div>
                </div>
                <div class="col-md-4" col-lg-4 col-sm-4 col-xs-4><br/><br/>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    <hr/>
    <div id="app2" class="container">
        <div class="row">
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="text-align: right">
                <div class="word">
                    <p>用户名</p><br/>
                    <p>性别</p><br/>
                    <p>手机号</p><br/>
                    <p>居住地</p><br/>
                    <p>我的宣言</p><br/>
                </div>
            </div>
            <div class="col-md-4">
                <p><br/></p>
                <p><br/></p>
                <p><br/></p>
                <p><br/></p>
            </div>
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                <input type="text" name="username" v-model="username" placeholder="请输入用户名"/><br/><p><br/></p>
                <input type="text" name="sex"  v-model="sex" placeholder="请输入性别"/><br/><br/>
                <input type="text" name="phonenum" v-model="phonenum" placeholder="请输入手机号"/><br/><p><br/></p>
                <input type="text" name="address"  v-model="address" placeholder="请输入地址"/><br/><p><br/></p>
                <textarea name="textfield" cols="22" rows="3" placeholder="请输入宣言">{{textfield}}</textarea>
            </div>
        </div>
    </div>
</form>
<div class="footer">
    <div class="text-center" style="padding-top:12px ;">
        关于项目 | 服务条款 | 隐私政策 | 客服中心 | 联系我们 | 帮助中心
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            userInfo: {
                avatar: 'img/default.jpg'
            }
            // 初始图片
        },
        methods: {
            // 打开图片上传
            uploadHeadImg: function () {
                this.$el.querySelector('.hiddenInput').click()
            },
            // 将头像显示
            handleFile: function (e) {
                let $target = e.target || e.srcElement
                let file = $target.files[0]
                var reader = new FileReader()
                reader.onload = (data) => {
                    let res = data.target || data.srcElement
                    this.userInfo.avatar = res.result
                }
                reader.readAsDataURL(file)
            },
        }
    })
    var app2 = new Vue({
        el: '#app2',
        data:{
            username:'',
            sex:'',
            phonenum:'',
            address:'',
            textfield:''
        },
       methods:{

    }
    })
</script>
